<template>

  <laout>
   <h1>欢迎来到我的网站</h1> 
   <div class="grid-content bg-purple" style="margin-top:60px;margin-right:20px;">
    <el-card style="margin:48px;">
      <div slot="header">
        <span>我关注的</span>
      </div>
        <el-button type="primary" class="btn" v-for="(i,indx) in favs" @click="onfavs(indx)">{{i}} &nbsp <i class="el-icon-circle-cross"></i></el-button>
      
    </el-card>

    <el-card style="margin:48px;margin-top:20px;">
      <div slot="header">
        <span>未关注的</span>
      </div>
        <el-button class="btn" v-for="(i,indx) in unfavs" @click="nofavs(indx)">{{i}}</el-button>
    </el-card>
  </div>
  </laout>
</template>



<script>
import Laout from "./new.vue"

export default {
  components: {
      Laout
  },
  data () {
    return{
      favs:[
        "SKT","WE","EDG","OMG","RNG"
      ],
      unfavs:[
        "G2","TSM","SS","IG","QG","LGD"
      ]
    }
    
  },
  methods: {
      onfavs(indx){
      let zz=this.favs.splice(indx,1);
      this.unfavs.push(zz[0]);
    },
    nofavs(indx){
      let zz=this.unfavs.splice(indx,1);
      this.favs.unshift(zz[0]);
    }
  }
}
</script>

<style scoped>
.btn{
  margin:4px;
}
body {
  font-family: Helvetica, sans-serif;
}
</style>